﻿@{

}
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>物联网设备</title>
    <link rel="icon" href="~/Content/images/favicon.ico">
    <link href="~/Content/styles/font-awesome.min.css" rel="stylesheet" />
    <link href="~/Content/scripts/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        body {
            width: 100%;
            height: 100%;
            background-image: url("../../Content/iotDevice/images/background.png");
            background-size: 100% 100%;
            position: absolute;
        }
        .vasoe_box {
            background-color: rgba(2,8,23,0.54);
            border-radius: 10px;
            border: 1px #0174f5 solid;
        }
        .vasoe_box_title {
            width: 44%;
            height: 28px;
            background-image: url("images/title.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            margin: 0 auto;
            padding-top: 5px;
            font-size: 12px;
            color: #ffffff;
            text-align: center;
        }
        .dataTable {
            height: 36px;
            padding: 5px;
            font-size:20px;
            border-collapse: collapse;
            color: #ffffff;
            margin-top: 10px;
            border: 1px solid #BFBFBF;
        }

        .rowCell {
            height:32px;
            text-align:center;
            border: 1px solid #5bc0de;
            padding-top: 5px;
            padding-bottom: 5px;
            text-indent: 10px;
        }
    </style>
</head>
<body>
    <div class="container-fluid" id="divContainer" style="border:0px solid red; margin:0px;">
        <div class="row" style="margin-top:10px;">
            <div class="col-sm-6 vasoe_box" style="height:300px;" v-for="item in deviceLast">
                <div class="vasoe_box_title" v-html="item.DeviceName">设备名称</div>
                <div class="col-sm-6">
                    <div id="divOC01" v-bind:id="item.divOC01" style="border:0px solid red; height:300px;display:none;"></div>
                </div>
                <div class="col-sm-6">
                    <div id="divHumidity01" v-bind:id="item.divHumidity01" style="border:0px solid red; height:300px;display:none;"></div>
                </div>
                <div class="col-sm-6">
                    <div id="divOC02" v-bind:id="item.divOC02" style="border:0px solid red; height:300px;display:none;"></div>
                </div>
                <div class="col-sm-6">
                    <div id="divHumidity02" v-bind:id="item.divHumidity02" style="border:0px solid red; height:300px;display:none;"></div>
                </div>
            </div>
            <!--
                <div class="col-sm-6 vasoe_box" style="height:300px;">
                    <div class="vasoe_box_title">历史数据</div>
                    <div id="divRecord02" v-bind:id="item.divRecord" style="border:0px solid red; height:100%; "></div>
                </div>
            -->
        </div>
        <div class="row" style="margin-top:10px;">
            <div class="col-sm-4 vasoe_box" style="height:300px;">
                <div class="vasoe_box_title">设备安装统计</div>
                <div id="divPie" style="border:0px solid red; height:300px;"></div>
            </div>
            <div class="col-sm-8 vasoe_box" style="height:300px">
                <div class="vasoe_box_title">设备安装信息</div>
                <div class="row dataTable">
                    <div class="col-sm-3" style="text-align:center;">名称</div>
                    <div class="col-sm-3" style="text-align:center;">类型</div>
                    <div class="col-sm-3" style="text-align:center;">安装日期</div>
                    <div class="col-sm-3" style="text-align:center;">设备标识</div>
                </div>
                <div class="row" v-for="item in deviceLast" style="color:white;">
                    <div class="col-sm-3 rowCell" v-html="item.DeviceName">名称</div>
                    <div class="col-sm-3 rowCell" v-html="item.TypeName">类型</div>
                    <div class="col-sm-3 rowCell" v-html="item.DateTime">安装日期</div>
                    <div class="col-sm-3 rowCell" v-html="item.SerialNumber">设备标识</div>
                </div>
            </div>
        </div>
    </div>
    <script src="~/Content/scripts/jquery/jquery-2.0.3.min.js"></script>
    <script src="~/Content/scripts/bootstrap/bootstrap.min.js"></script>
    <script src="~/Content/scripts/plugins/echarts/echarts.min.js"></script>
    <script src="~/Content/scripts/plugins/dialog/dialog.js"></script>
    <script src="~/Content/iotDevice/vue.js"></script>
    <script src="~/Content/scripts/utils/xlib-ui.js"></script>
    <script type="text/javascript">
        var contentPath = '@Url.Content("~")'.substr(0, '@Url.Content("~")'.length - 1);
        var corpId = request("corpId");

        var vue = new Vue({
            el: '#divContainer',
            data: {
                deviceType: [],
                deviceTotal: [],
                deviceLast:[],
            },
            mounted: function () {
                var that = this;
                that.loadContent();

                setInterval(that.loadContent, 60 * 1000);
            },
            methods: {
                loadContent: function () {
                    var that = this;
                    $.ajax({
                        url: contentPath + "/api/IotDeviceData/GetDeviceLastByCorpId",
                        data: { corpId: "@ViewBag.CorpId" },
                        type: "get",
                        dataType: "json",
                        async: false,
                        success: function (result) {
                            console.log(JSON.stringify(result));
                            if (result.type != 1) {
                                formMessage(result.message);
                                return;
                            }
                            var data = JSON.parse(result.resultdata);
                            that.deviceLast = data;
                            that.deviceType = [];
                            that.deviceTotal = [];

                            for (var i = 0; i < that.deviceLast.length; i++) {
                                //var item = data[i];
                                /*动态增加属性*/
                                that.deviceLast[i].divOC01 = "divOC01_" + i;
                                that.deviceLast[i].divOC02 = "divOC02_" + i;
                                that.deviceLast[i].divHumidity01 = "divHumidity01_" + i;
                                that.deviceLast[i].divHumidity02 = "divHumidity02_" + i;
                                that.deviceLast[i].divRecord = "divRecord_" + i;

                                var name = that.deviceLast[i].DeviceType == "two_temperature" ? "双温度设备" : "温湿度设备";
                                data[i].TypeName = name;

                                if (that.deviceType.indexOf(name) == -1) {
                                    that.deviceType.push(name);
                                    that.deviceTotal.push({ name: name, value: 1 });
                                }
                                else {
                                    that.deviceTotal.find(function (item, index, arr) {
                                        if (item.name == name) {
                                            item.value = item.value + 1;
                                            return index;
                                        }
                                    })
                                }
                            }
                        }
                    });

                    that.$nextTick(function () {
                        console.log("nexttick");
                        //console.log(JSON.stringify(that.deviceLast));
                        var pieOption = getPie();
                        //pieOption.legend.data = ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'];
                        pieOption.legend.data = that.deviceType;
                        /*
                        pieOption.series[0].data = [{ value: 335, name: '直接访问' }
                            , { value: 310, name: '邮件营销' }
                            , { value: 234, name: '联盟广告' }
                            , { value: 135, name: '视频广告' }
                            , { value: 1548, name: '搜索引擎' }
                        ];
                        */
                        pieOption.series[0].data = that.deviceTotal;
                        initEcharts("divPie", pieOption);

                        // Code that will run only after the
                        // entire view has been rendered
                        for (var i = 0; i < that.deviceLast.length; i++) {
                            var item = that.deviceLast[i];
                            //console.log(JSON.stringify(item));
                            if (item.DeviceType == "two_temperature") {
                                var option = getGauge();
                                //option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
                                option.series[0].data[0].value = item.OC01Value;
                                initEcharts(item.divOC01, option);

                                var option = getGauge();
                                //humidity.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
                                option.series[0].data[0].value = item.OC02Value;
                                initEcharts(item.divOC02, option);
                            }
                            else {
                                var option = getGauge();
                                option.series[0].data[0].value = item.OC01Value;
                                initEcharts(item.divOC01, option);

                                var humidity = getHumidity();
                                humidity.series[0].data[0].value = item.Humidity01Value;
                                initEcharts(item.divOC02, humidity);
                            }
                        }
                    })
                },
                record: function (item) {
                    //return getRecord(item);
                    return "<div id=\""+item.divRecord+"\" style=\"border:1px solid red; height:300px;\"></div>";
                }
            }
        });

        var initEcharts = function (id, op) {
            var element = document.getElementById(id);
            element.style.display = 'block';

            var myChart = echarts.init(element);
            myChart.setOption(op);
            $(window).resize(function () {
                myChart.resize();
            });
        };

        function getGauge() {
            var option = {
                tooltip: {
                    formatter: "{a} <br/>{b} : {c}℃"
                },
                toolbox: {
                    feature: {
                        restore: {},
                    }
                },
                series: [
                    {
                        name: '业务指标',
                        type: 'gauge',
                        min: -30,
                        max: 100,
                        detail: {
                            offsetCenter: [0, "30%"],    //设置仪表盘下方显示内容位置
                            formatter: '{value}℃',
                            textStyle: { color: 'white', fontSize: 20 },
                        },
                        title : {               //设置仪表盘中间显示文字样式
                            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                color:"white"
                            }
                        },
                        axisLabel: { //文字样式（及“10”、“20”等文字样式）
                            color: "white",
                            distance: 5 //文字离表盘的距离
                        },
                        data: [{ value: 50, name: '温度' }],
                    }
                ],
                
            };
            return option;
        }
        function getHumidity() {
            var option = {
                tooltip: {
                    formatter: "{a} <br/>{b} : {c}%RH"
                },
                toolbox: {
                    feature: {
                        restore: {},
                    }
                },
                series: [
                    {
                        name: '业务指标',
                        type: 'gauge',
                        min: 0,
                        max: 100,
                        detail: {
                            offsetCenter: [0, "30%"],    //设置仪表盘下方显示内容位置
                            formatter: '{value}%RH',
                            textStyle: { color: 'white', fontSize: 20 },
                        },
                        title: {               //设置仪表盘中间显示文字样式
                            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                color: "white"
                            }
                        },
                        axisLabel: { //文字样式（及“10”、“20”等文字样式）
                            color: "white",
                            distance: 5 //文字离表盘的距离
                        },
                        data: [{ value: 50, name: '湿度' }]
                    }
                ]
            };
            return option;
        }

        function getPie() {
            var option = {
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                toolbox: {
                    feature: {
                        restore: {},
                        saveAsImage: { show: true }
                    }
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
                    textStyle:{//图例文字的样式
                        color:'white' 
                    }
                },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: [
                            { value: 335, name: '直接访问' },
                            { value: 310, name: '邮件营销' },
                            { value: 234, name: '联盟广告' },
                            { value: 135, name: '视频广告' },
                            { value: 1548, name: '搜索引擎' }
                        ],
                        itemStyle: {
                            normal: {
                                label: {
                                    textStyle: {
                                        color: 'white',
                                    }
                                },
                                labelLine : {
                                    lineStyle:{
                                        color: 'white'
                                    }
                                }
                            },
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            return option;
        }

        function getRecord() {
            var option = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['蒸发量', '降水量'],
                    textStyle:{//图例文字的样式
                        color:'white' 
                    }
                },
                toolbox: {
                    show: true,
                    feature: {
                        magicType: { show: true, type: ['line', 'bar'] },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        data: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23']
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '蒸发量',
                        type: 'bar',
                        data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                        markPoint: {
                            data: [
                                { type: 'max', name: '最大值' },
                                { type: 'min', name: '最小值' }
                            ]
                        },
                        markLine: {
                            data: [
                                { type: 'average', name: '平均值' }
                            ]
                        }
                    },
                    {
                        name: '降水量',
                        type: 'bar',
                        data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
                        markPoint: {
                            data: [
                                { name: '年最高', value: 182.2, xAxis: 7, yAxis: 183 },
                                { name: '年最低', value: 2.3, xAxis: 11, yAxis: 3 }
                            ]
                        },
                        markLine: {
                            data: [
                                { type: 'average', name: '平均值' }
                            ]
                        }
                    }
                ]
            };
            return option;
        }
    </script>
</body>
</html>
